<template>
  <div class='container'>
    <div class="preview-container">
        <el-dialog
          title="预览文章"
          :visible="preViewdialogVisible"
          width="55%"
          @close="closeView">
          <h2>{{ viewList.title }}</h2>
          <p class="spancon">
            <span>{{ formatDate(viewList.createTime) }}</span>
            <span>超级管理员</span>
            <span><i class="el-icon-view" style="margin-right:10px"></i>{{viewList.visits}}</span>
          </p>
         <div class="content" v-html="viewList.articleBody">
         </div>
        </el-dialog>
    </div>
  </div>
</template>

<script>
import { detail } from '../../api/hmmm/articles'
import * as dayjs from 'dayjs'
export default {
  name: 'ArticlePreView',
  props: {
    preViewdialogVisible: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      viewList: []
    }
  },
  methods: {
    closeView () {
      this.$emit('closeView')
    },
    async getViewDetail (id) {
      const res = await detail({ id })
      console.log(res)
      this.viewList = res.data
    },
    // 处理时间
    formatDate (val) {
      return dayjs(val).format('YYYY-MM-DD HH:mm:ss')
    }
  }
}
</script>

<style scoped lang='less'>
.spancon {
  height: 30px;
  span {
    margin-right: 15px;
  }
}
.preview-container {
  h2{
    margin: 0;
    padding: 0;
  }
  .el-dialog__body {
    padding:10px 20px;
    color: #606266;
    font-size: 14px;
    word-break: break-all;
  }
  .content{
    background: #f5f5f5;
    padding: 10px;
    border-top:1px dashed rgb(181, 170, 170);
  }
}
</style>
